import { useEffect, useMemo, useRef, FC } from 'react'
import { BufferGeometry, DoubleSide } from 'three'

type PropType = {
  num: number
}

const CustomObject: FC<PropType> = ({ num }) => {
  const vertex = num * 3
  const position = useMemo(() => {
    const data = new Float32Array(vertex * 3)
    for (let i = 0; i < vertex * 3; i++) {
      data[i] = (Math.random() - 0.5) * 3
    }
    return data
  }, [vertex])
  const geometryRef = useRef<BufferGeometry>(null!)
  useEffect(() => {
    geometryRef.current.computeVertexNormals()
  }, [position])

  return (
    <mesh>
      <bufferGeometry ref={geometryRef}>
        <bufferAttribute
          attach="attributes-position"
          itemSize={3}
          array={position}
          count={vertex}
        />
      </bufferGeometry>
      <meshStandardMaterial side={DoubleSide} color="red" />
    </mesh>
  )
}

export default CustomObject
